<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师后台-不学也通</title>
    <style>
        .container{
            min-height: 100vh;
        }
        .container.nav{
            min-height: 100vh;
            background-color: #fff;
        }

        .link-secondary{
            text-decoration: none;
        }
        .link-secondary:hover{
            color: #0d6efd !important;
        }
        
    </style>
</head>
<body>
    <!--container是bootstrap的居中窄的显示方案-->
     <div class="container bg-body-secondary">
        <div class="row">
            <div class="col-md-2 leftmenu" id="leftmenu"></div>
            <div class="col-md-9 col-xs-12 kc ms-3">
                <div class="row mt-3 pd-1 border-bottom border-secondary">
                    <div class="col-md-2">班级列表</div>
                    <div class="col-md-2 offset-md-8">
                        <a class="nav-link link-success" href="./createcourse.html">
                            <i class="bi bi-plus-circle-fill"></i>
                            添加班级
                        </a>
                    </div>
                </div>
                <!--添加学生-->
                <div class="row mt-3">
                    <!---->
                    <div class="col-md-3 col-xs-12">
                        <input type="text" class="form-control" placeholder="手机号/学号">
                        <!--一个搜索图标定位到输入框最右侧-->
                        <i class="bi bi-search text-success position-absolute" style="right: 20px;top: 10px;"></i>
                    </div>
                    <div class="col-md-1 offset-md-8 col-xs-6 offset-xs-6">
                        <button class="btn-succeess" data-bs-toggle="modal" data-bs-target="#exampleModal">添加学生</button>
                    </div>
                </div>
                <div class="row mt-3">
                    <thead class="table table-boredered">
                        <tr>
                            <th>序号</th>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>系部</th>
                            <th>教学团队</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>221142601014</td>
                            <td>贾**</td>
                            <td>计算机科学应用系</td>
                            <td>22级移动应用开发</td>
                            <td>2022-09-10</td>
                            <td>
                                <button class="btn btn-sm btn-primary">编辑</button>
                                <button class="btn btn-sm btn-danger">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </div>
            </div>
        </div>
     </div>

    <!--Modal-->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5 text-success" id="exampleModalLabel">添加学生</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                      <form>
                        <!--手机号-->
                        <div class="mb-3">
                            <label for="tel" class="form-label">手机:</label>
                            <input type="tel"required class="form-control" id="tel" aria-describedby="tel"
                             placeholder="请输入手机号">
                        </div>
                        <!--学号-->
                        <div class="mb-3">
                            <label for="sno" class="form-label">学号:</label>
                            <input name="sno" type="number" required class="form-control" id="sno" 
                            aria-describedby="tel" placeholder="请输入学号">
                        </div>
                        <!--姓名-->
                        <div class="mb-3">
                            <label for="name" class="form-label">姓名:</label>
                            <input name="name"  type="text" required class="form-control" id="name" 
                            aria-describedby="tel" placeholder="请输入姓名">
                        </div>
                        <!--把选择院系 选择专业 都留在添加班级中实现-->
                      </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn text-white bg-danger" data-bs-dismiss="modal">取消</button>
                    <button id="submit" type="button" class="btn btn-succeess">添加</button>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="../js/main.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        $(document).ready(function(){
            $("#submit").click(function (){
                //获取提交数据
                //方式一 获取全部
                // $("#studentFrom").serializeArray()获取form表单中所有要提交的信息
                // console.log($("#studentForm").serializeArry());
                //方式二 一个一个索取
                let name = $("#name").nav();
                let tel = $("#tel").nav();
                let sno = $("#sno").nav();
                //提交学生信息到后端
                $.post("http://unicloud.codecore.cn/ms/studentCreate",{
                    student_name: escape(name),//后端有问题 先将汉字转成 机器码
                    tel:tel,
                    sno:sno
                }, function (res) {
                    console.log(res);
                    if(res.errCode == 0) {
                        //提示添加成功
                        location.reload();//刷新当前页面
                    } else {
                        //提示添加失败
                    }
                })
            })
        })
        //进入页面直接获取所有学生信息（后期添加获取班级下的学生信息）
        $.get("hettp://unicloud.codecore.cn/ms/studentAll",{},function (res){
            //1.获取到改班级所有的学生信息 后端返回的是一个数值 res
            for (let i = 0; i<res.lenght; i++){
                //3.循环该数组 将数组中数据拼接到下面字符串对应位置
                const elem = res[i];
                /**
                 * 4.使用es6 ${}字符串拼接
                 * 后端没有传递序号 由前端for循环的i充当
                 * 时间需要我们手动转化一下格式
                */
               $("#tbody").append($(`<tr>
                           <td>${i + 1}</td>
                           <td>${elem.sno}</td>
                           <td>${elem.name}</td>
                           <td>${elem.department_name}</td>
                           <td>${elem.class_name}</td>
                           <td>${elem.major_name}</td>
                           <td>${elem.create_time}</td>
                           <td>
                               <button class="btn btn-sm btn-Success">编辑</button>
                               <button class="btn btn-sm btn-danger"data-id="${elem._id}">删除</button>
                            </td>`))
            }
        })
        //当点击删除按钮触发
        $("#tbody").delegate("button.btn-danger","click",function(){
            //$(this).data()获取点击元素上data属性中存放的数据
            let data = $(this).data();//data数据格式是{id:"字符串"}比较符合后端要求 可以直接传递
            $.post("http://unicloud.codecore.cn/ms/studentRemove",data,function(params){
                if(params.errCode == 0){
                    location.reload()
                }else{
                    alert("删除异常")
                }
            })
        })
    </script>
</body>
</html>
